<template>
  <div :class="className" :style="{height:height,width:width}" />
  
</template>

<script>
import echarts from 'echarts'
import 'echarts-gl'

require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
import CRUD, { presenter, header, form, crud } from '@crud/crud'

export default {
  inject: ['reload'],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    line3DataC:{
      type: Array,
      // default: function () { return [] }
      default: () => []
    },
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    line3DataC(){
      // console.log("laile");
      // console.log(this.line3DataC);
　　}
  },
  mounted() {
    // console.log("mounted123",this.line3DataC)
    if(this.line3DataC.length > 0){
      this.initChart()
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        baseOption:{
          timeline: {
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: false,
            currentIndex: this.dataFormatterLength(this.line3DataC)-1,
            // currentIndex: 2,
            playInterval: 100,
            // controlStyle: {
            //     position: 'left'
            // },
            data: this.dataFormatterTimeList(this.line3DataC),
            label: {
                formatter : function(s) {
                    return s;
                }
            }
          },
          title: {
            subtext: "数据分析"
          },
          tooltip: {
            show: true
          },
          axisType: 'value',
          backgroundColor: '#fff',
          grid: {
            top: 80,
            bottom: 100
          },
          xAxis3D: {
              name: this.dataFormatterCoordinate(this.line3DataC).x,
              type: 'value'
          },
          yAxis3D: {
              name: this.dataFormatterCoordinate(this.line3DataC).y,
              type: 'value'
          },
          zAxis3D: {
              name: this.dataFormatterCoordinate(this.line3DataC).z,
              type: 'value'
          },
          grid3D: {
              viewControl: {
                  projection: 'orthographic'
              }
          },
          toolbox: {
              left: 'center',
              feature: {
                  saveAsImage: {}
              }
          },
          legend:{
              left: 'right',
              tooltip:{
                  show:true
              }
          }
        },
        options: this.dataFormatter(this.line3DataC)
      })
    },
    dataFormatter(values) {
      var resultData = new Array();
      if(values !=null&&values[0]!=null){
        var tag1 = new Array();
        
        for(var j = 0; j < values[0].beijingTimeList.length; j++){ // 44
          var series1 = new Object();// 44
          series1.series = new Array();
          
          for(var int2 = 0 ; int2 < values.length;int2++){ // 10
            
            var dataOne = values[int2].datathreeDimensionalData[j];
            if(j == 0){
              var arrayOne = new Array();
              arrayOne.push(dataOne);
              tag1.push(arrayOne);
            }else{
              tag1[int2].push(dataOne);
            }
            var data2 = tag1[int2];
            // console.log("data2",data2);
            var obj1 = {name:values[int2].equipmentName,type: 'line3D',data: data2.slice(),lineStyle: {width: 8}};
            series1.series.push(obj1);
            // console.log("obj1",obj1);
          }
          resultData.push(series1);
        }
      }
      // console.log("resultData3D",resultData);
      return resultData;
    },
    dataFormatterTimeList(values) {
      var resultTime = null;
      if(values !=null&&values[0]!=null){
        resultTime = values[0].beijingTimeList
      }
      return resultTime;
    },
    dataFormatterLength(values) {
      var length = null;
      if(values !=null&&values[0]!=null){
        length = values[0].beijingTimeList.length
      }
      return length;
    },
    dataFormatterCoordinate(values){
      var coordinate = null;
      if(values !=null&&values[0]!=null){
        coordinate = values[0].coordinate
      }
      return coordinate;
    }
  }
}
</script>
